<template>
  <div class="filter-container">
    <el-input
      v-model="listQueryValue.name"
      :placeholder="listQueryRemark.name"
      style="width: 200px"
      class="filter-item"
      @keyup.enter="handleFilter"
    />
    <el-input
      v-model="listQueryValue.phoneNumber"
      :placeholder="listQueryRemark.phoneNumber"
      style="width: 200px"
      class="filter-item"
      @keyup.enter="handleFilter"
    />
    <el-select
      v-model="listQueryValue.positionType"
      :placeholder="listQueryRemark.positionType"
      clearable
      class="filter-item"
      style="width: 130px"
    >
      <el-option
        v-for="item in listQueryRemark.positionTypeOptions"
        :key="item.key"
        :label="item.displayName + '(' + item.key + ')'"
        :value="item.key"
      />
    </el-select>
    <el-button
      v-waves
      class="filter-item"
      type="primary"
      icon="el-icon-search"
      @click="handleFilter"
    >
      {{ listQueryRemark.search }}
    </el-button>
    <!-- <el-button
      v-waves
      class="filter-item"
      type="primary"
      icon="el-icon-edit"
      @click="handleAdd"
    >
      {{ listQueryRemark.add }}
    </el-button> -->
    <el-button
      v-waves
      :loading="downloadLoading"
      class="filter-item"
      type="primary"
      icon="el-icon-download"
      @click="handleDownload"
    >
      {{ listQueryRemark.export }}
    </el-button>
    <!-- <el-checkbox
        v-model="showReviewer"
        class="filter-item"
        style="margin-left: 15px"
        @change="tableKey = tableKey + 1"
      >
        {{ t("table.reviewer") }}
      </el-checkbox> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      listQueryRemark: {
        name: "姓名",
        phoneNumber: "电话号码",
        positionTypeOptions: [
          { key: "super", displayName: "最高权限员" },
          { key: "manager", displayName: "经理" },
          { key: "counter", displayName: "柜台" },
        ],
        positionType: "职位",
        search: "搜索",
        add: "添加",
        export: "导出",
        total: 100,
      },
      listQueryValue: {
        name: "",
        phoneNumber: "",
        positionType: "",
        page: 1,
        limit: 10,
        currentPage: 1,
      },
    };
  },
};
</script>